<template>
	<view class="content">
		<text class="title">卓越快递</text>
		<view class="title-logo">
			<image class="logo" src="/static/logo.png" mode=""></image>
		</view>
		<view class="view-ipt">
			<text class="account-lbl">账号 |</text>
			<input class="account-ipt" placeholder="请输入账号" v-model="account" />
		</view>
		<view class="view-ipt">
			<text class="account-lbl">密码 |</text>
			<input class="account-ipt" placeholder="请输入密码" v-model="password" type="password" />
		</view>
		<view class="view-ipt">
			<text class="account-lbl">验证码 |</text>
			<input class="account-ipt" placeholder="请输入验证码" v-model="verCode" />
		</view>
		<view class="register">
			<view class="canvas-img-code" @click="refresh()">
				<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"
					@error="canvasIdErrorCallback"></canvas>
			</view>
		</view>
		<button class="login-btn" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
		<button class="login-btn cancel-btn">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: "",
				password: "",
				verCode: "", // 输入的验证码
				rootVerCode: "", // 生成的验证码
				width: 120,
				height: 45
			}
		},
		onShow () {
			this.init();
		},
		mounted() {
			this.init();
		},
		methods: {
			login() {
				let users = [{
						account: "test",
						password: "123"
					},
					{
						account: "test1",
						password: "123"
					},
					{
						account: "test2",
						password: "123"
					},
					{
						account: "admin",
						password: "123"
					}
				];
				if (this.account === null || this.account === '') {
					uni.showToast({
						icon: "error",
						title: "请输入账号",
						duration: 2000
					});
					return
				} else if (this.password === null || this.password === '') {
					uni.showToast({
						icon: "error",
						title: "请输入密码",
						duration: 2000
					});
					return
				} else if (this.verCode === null || this.verCode === '') {
					uni.showToast({
						icon: "error",
						title: "请输入验证码",
						duration: 2000
					});
					return
				} else if (this.verCode !== this.rootVerCode) {
					uni.showToast({
						icon: "error",
						title: "请输入正确的验证码",
						duration: 2000
					});
					return
				}
				console.log(`输入账号: ${this.account}, 密码: ${this.password}`);
				let isAuthenticated = false;

				for (let user of users) {
					if (user.account === this.account.trim() && user.password === this.password.trim()) {
						console.log("登陆成功");
						isAuthenticated = true;
						uni.setStorageSync('account', this.account)
						uni.switchTab({
							url: '/pages/index/index'
						})
						return;
					}
				}

				uni.showToast({
					icon: isAuthenticated ? "success" : "none",
					title: isAuthenticated ? "登陆成功" : "请输入正确的账号和密码",
					duration: 2000
				});
			},
			init() {
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R",
						"S",
						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				console.log(str)
				this.rootVerCode = str
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
			},
			rc(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh() {
				this.init();
			},
			canvasIdErrorCallback(e) {
				console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 45px);
	}

	.logo {
		width: 80px;
		height: 70px;
	}

	.title {
		font-size: 18px;
	}

	.title-logo {
		margin: 45px 0 20px;
	}

	.view-ipt {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180px;
		height: 50px;
		border: 1px solid #9094ad;
		border-radius: 10px;
		padding-left: 20px;
		margin-top: 20px;
	}

	.account-lbl {
		width: 60px;
	}

	.account-ipt {
		font-size: 10px;
	}

	.login-btn {
		margin-top: 20px;
		width: 200px;
		font-size: 14px;
		height: 50px;
		padding-top: 10px;
		background-color: #3e6de1;
		color: white;
		border-radius: 10px;
	}

	.cancel-btn {
		background-color: #c2c2c2;
	}
</style>